<template>
    <div v-loading="loading" class="container">
        <Main></Main>
        <div class="back">
            <el-button @click="_toPage({ path: '/quota/forecast' })"
                >返回</el-button
            >
        </div>
    </div>
</template>

<script>
import Details from "./details";
import PayTable from "./payTable";
import PriceSheet from "./priceSheet";
import Profit from "./profit";
import * as apis from "@/api/quota/forecast/edit/api.js";
import Main from "./main";
export default {
    name: "ForecastDetails",
    components: { Details, PayTable, PriceSheet, Profit, Main },
    data() {
        return {
            activeName: "first",
            loading: true,
            menus: [
                {
                    name: "内部报价详情",
                    key: "first",
                    com: "Details",
                },
                {
                    name: "租金支付表",
                    key: "second",
                    com: "PayTable",
                },
                {
                    name: "对外报价单",
                    key: "third",
                    com: "PriceSheet",
                },
                {
                    name: "财务利润测算",
                    key: "fourth",
                    com: "Profit",
                },
            ],
            infoData: {},
        };
    },
    computed: {
        calcSchemeId() {
            return this.$route.query.calcSchemeId;
        },
        state() {
            return "readonly";
        },
        type() {
            return "preview";
        },
        currentCom() {
            let item = this.menus?.find((e) => e.key == this.activeName);
            return item?.com;
        },
    },
    created() {
        if (this.calcSchemeId) {
            this.getDetails(this.calcSchemeId);
        } else {
            this.initData();
            this.loading = false;
        }
    },
    mounted() {},
    methods: {
        handleClick() {},
        initData() {
            this.infoData = {
                productList: [
                    {
                        plan: {},
                        insuranceList: [],
                        maintenanceList: [],
                        attachedDecorationList: [],
                        feeList: [],
                    },
                ],
            };
        },
        getDetails(calcSchemeId) {
            apis?.Details(calcSchemeId)
                .then((res) => {
                    if (res.code == 200) {
                        this.infoData = res.data;
                        this.infoData?.productList?.forEach((product) => {
                            try {
                                if (this.notEmpty(product?.calcSnapshoot)) {
                                    product.calcSnapshoot = JSON.parse(
                                        product.calcSnapshoot
                                    );
                                }
                            } catch (error) {
                                console.warn(error);
                            }
                        });
                    }
                })
                .finally(() => {
                    this.loading = false;
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.tabs {
    margin: 20px;
    padding: 5px 20px 0;
    background-color: #fff;
    border-radius: 8px;
}
.container {
    min-height: calc(100vh - 220px);
}
.back {
    margin: 20px;
    background: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
